import ReactEcharts from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import styles from './style.less';
import china_json from '@/assets/json/china.json';
import { geoCoordMap, numData, widthToPixel, heightToPixel, areaImg } from './shared.data';

export default function Map() {
  echarts.registerMap('china', china_json);

  const convertData = data => {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      const dataItem = data[i];
      const fromCoord = geoCoordMap['北京'];
      const toCoord = geoCoordMap[dataItem.name];
      if (fromCoord && toCoord) {
        res.push({
          fromName: '北京',
          toName: dataItem.name,
          coords: [fromCoord, toCoord],
        });
      }
    }
    return res;
  };

  const mySeries = [
    {
      type: 'lines',
      z: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        // constantSpeed: 143,
        trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 8, //图标大小
        color: '#FFE052',
      },
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'white', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0.1)', // 100% 处的颜色
            },
          ],
        },
        width: 1, //线条宽度
        opacity: 0.1, //尾迹线条透明度
        curveness: -0.5, //尾迹线条曲直度
      },
      symbol: 'rect',
      symbolSize: 12,
      data: convertData(numData),
      emphasis: {
        lineStyle: {
          color: 'red',
        },
        label: {
          show: true,
        },
      },
      progressive: 0,
    },
    {
      //省份圆点
      type: 'effectScatter',
      coordinateSystem: 'geo',
      z: 3,
      showEffectOn: 'emphasis',
      rippleEffect: {
        brushType: 'stroke',
        scale: 2,
        number: 3,
        period: 4,
      },
      label: {
        show: true,
        position: 'top',
        formatter(params) {
          return `{pic|${params.data.name} ${params.data.value[2]}}`;
        },
        rich: {
          pic: {
            backgroundColor: {
              image: require('@/assets/images/pro_bg.png'),
            },
            width: widthToPixel(115),
            height: heightToPixel(49),
            color: '#fff',
            fontSize: widthToPixel(24),
            fontWeight: 700,
            padding: [0, widthToPixel(20)],
          },
        },
      },
      symbol: areaImg,
      symbolSize: widthToPixel(24),
      data: numData.map(i => ({
        name: i.name,
        value: geoCoordMap[i.name].concat(i.value),
      })),
    },
  ];

  const options = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    geo: [
      {
        map: 'china',
        roam: false,
        center: [104.904578, 34.028811],
        zoom: 1,
        z: 0,
        aspectScale: 0.82,
        itemStyle: {
          areaColor: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'transparent', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'transparent', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          borderColor: 'transparent',
          borderWidth: 4,
        },
        label: {
          show: true,
          positon: 'top',
          distance: 5,
          formatter(params) {
            return [`{diy|${params.name}🐶}`].join('\n');
          },
          rich: {
            diy: {
              color: 'green',
            },
          },
        },
        emphasis: {
          label: {
            show: false,
          },
          itemStyle: {
            areaColor: 'transparent',
          },
        },
        regions: [{ name: '江西', itemStyle: { areaColor: 'red' } }],
      },
    ],
    series: mySeries,
  };
  return (
    <div className={styles.map_wrap}>
      <ReactEcharts echarts={echarts} option={options} notMerge style={{ height: '100%' }} />
    </div>
  );
}
